<template>
	<view class="container">
		<uni-list showArrow="false">
			<uni-list-item v-for="(item,index) in nfcList" :key="index" to="/pages/functions/tool_bar/nfc_plan/plan_detail" :clickable="true">
				<template v-slot:header>
					<view style="margin-right: 20px;">
						<uni-tag v-if="item.finished === 1" :mark="true" text="未完成" type="warning" size="small" />
						<uni-tag v-if="item.finished === 2" :mark="true" text="进行中" type="primary" size="small" />
						<uni-tag v-if="item.finished === 3" :mark="true" text="已完成" type="success" size="small" />
					</view>	
				</template>
				<template v-slot:body>
					<view class="slot-box" style="display: flex;width: 60%;">

						<view style="width: 80%;">
							<text class="slot-text">{{item.title}}
							<br/>{{item.time}}
							<br/>159010255
							</text>
						</view>
					</view>
				</template>
				<template v-slot:footer>
					<view style="align-items: center;">
						<button @click.stop="toggle($refs.popup1,item)" style="border-style: none;" plain="true"><uni-icons type="more-filled" size="25" color="#b1b1b1"></uni-icons></button>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<button class="fab-button" @click="toAdd" type="primary">新增</button>
		<uni-popup ref="popup1" background-color="#fff" @change="change" style="bor">
			<view style="width: 250px;">
				<uni-list>
					<uni-list-item :clickable="true" class="menu-item" @click="toAdd">
						<template v-slot:body>
							<view style="width: 100%;" class="menu-item-box">
								编辑
							</view>
						</template>
					</uni-list-item>
					<uni-list-item :clickable="true" class="menu-item">
						<template v-slot:body>
							<view style="width: 100%;color: #FF5A5F;" class="menu-item-box">
								删除
							</view>
						</template>
					</uni-list-item>
					<uni-list-item :clickable="true" class="menu-item"@click="closepopup">
						<template v-slot:body>
							<view style="width: 100%;" class="menu-item-box" >
								返回
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
		</uni-popup>
	</view>
</template>
	
<script>
	export default {
		data() {
			return {
				nfcList:[
					{
					finished:1,
					tag:'已完成',
					title:'标题测试',
					time:'20001345'
					},
					{
						finished:2,
					tag:'已完成',
					title:'标题测试',
					time:'20001345'
					},
					{
						finished:3,
					tag:'已完成',
					title:'标题测试',
					time:'20001345'
					},
				]
			}
		},
		methods: {
			/* 到主页 */
			toMain(){
				uni.switchTab({
					url:'../functions/tool_bar/me/index'
				})
			},
			/* 到新增nfc计划 */
			toAdd(){
				console.log("toadd")
				/* this.$router.push({path: '/pages/functions/tool_bar/nfc_plan/create_plan'}) */
				uni.navigateTo({
					url:"./create_plan"
				})
			},
			/* 展开编辑弹窗*/
			toggle(e,item,type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				e.open(type)
			},
			/* 弹窗状态变化触发 */
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			/* 关闭弹窗 */
			closepopup(){
				this.$refs.popup1.close()
			},
			/* 载入表单数据 */
			init_data(){
				//TODO
			}
		}
	}
</script>

<style>
	.fab-button{
		position: fixed;
		bottom: 80px;
		right: 25px;
		width:65px;
		height: 65px;
		line-height: 65px;
		border-radius:50%;
		box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.2), 0 10px 28px 0 rgba(0, 0, 0, 0.19);
		font-size: 5px;
	}
	.menu-item-box{
		width: 100%;
		text-align: center;
		align-items: center;
	}
/* 	.menu-item:active{
		background-color: #e2e2e2;
	} */
</style>
